import React, { useState, useMemo } from 'react';
// useEffect, useMemo, useCallback 三者的区别要注意
// useMemo和useEffect二者作用有点相似，但是并不同，执行的顺序不同

// 父组件
function Memo() {
    const [name, setName] = useState('小虎')
    const [name1, setName1] = useState('小龙')
    return (
        <>
            <button onClick={() => { setName(new Date().getTime() + '小虎') }}>小虎</button>
            <button onClick={() => { setName1(new Date().getTime() + '小龙') }}>小龙</button>
            {/* 在不用useMemo的情况下，只要是name和name1中的一个更新了，那么组件里的方法都会全部调用一遍，用了useMemo的话，对应的函数就只会在useMemo依赖的数据改变的时候和刚加载的时候执行 */}
            <Child name={name}>{name1}</Child>
        </>
    )
}


// 子组件
function Child({ name, children }) {
    function childFn(name) {
        console.log('方法触发了');
        return name
    }
    //在这里使用了useMemo，那么在这里就只有在组件刚加载和name更新的时候触发里面的函数，可以用来性能优化
    const nameTxt = useMemo(() => childFn(name), [name])

    // 下面这个是只要数据更新，那么就会触发函数
    // const nameTxt = childFn(name)
    return (
        <>
            <p>{nameTxt}</p>
            <p>{children}</p>
        </>
    )
}

export default Memo